<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>传悦案例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        img {
            vertical-align: middle;
        }
        
        header {
            width: 100%;
            height: 271px;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        
        #top {
            width: 100%;
            height: 48px;
            background-color: #323232;
        }
        
        #top #top-con {
            width: 1100px;
            margin: auto;
            line-height: 48px;
            display: flex;
            justify-content: space-between;
        }
        
        #top-con ul {
            display: flex;
        }
        
        #top-con ul li {
            width: 88px;
            height: 48px;
            text-align: center;
        }
        
        #top-con ul li a {
            font-size: 14px;
            color: #a6a6a6;
        }
        
        #top-con ul li a:hover {
            color: #dd4012;
        }
        
        #top-con ul li a:hover {
            color: #fff;
        }
        
        #top-con ul li:hover {
            background-color: #dd4012;
        }
        
        #top-con ul .point {
            background-color: #dd4012;
        }
        
        #top-con ul .point a {
            color: #fff;
        }
        
        #top-con #contact {
            display: flex;
            height: 48px;
            align-items: center;
        }
        
        #contact img {
            width: 18px;
            height: 18px;
            /* display: block; */
            margin-right: 17px;
            /* margin-top: 8px; */
            cursor: pointer;
        }
        
        #contact p {
            /* line-height: 36px; */
            font-size: 10px;
            color: #505050;
            margin-right: 24px;
        }
        
        #logo {
            width: 183px;
            height: 48px;
            position: relative;
        }
        
        #logo #logo-con {
            position: absolute;
            top: 0;
            left: 0;
        }
        
        #banner {
            flex: 1;
            background: url(img/banner.png);
        }
        
        #bottom {
            width: 100%;
            height: 28px;
            position: absolute;
            bottom: -1px;
            left: 0;
            background: url(img/black.png);
        }
        
        #bottom #bottom-con {
            width: 1100px;
            margin: auto;
            line-height: 28px;
            color: #a6a6a6;
            font-size: 12px;
        }
        
        main {
            height: 1236px;
            width: 100%;
            background-color: #f0f1f1;
        }
        
        #main-con {
            width: 1100px;
            margin: auto;
        }
        
        #main-con .list {
            display: flex;
            box-sizing: border-box;
            padding-top: 22px;
            margin-bottom: 28px;
        }
        
        #main-con .list li {
            width: 78px;
            line-height: 26px;
            text-align: center;
            margin-right: 16px;
            font-size: 11px;
            color: #636363;
            background-color: #fff;
        }
        
        #main-con .all {
            background-color: #636363;
            color: #fff;
        }
        
        #main-con .pic-word {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            height: 100%;
        }
        
        #main-con .pic-word li {
            width: 260px;
            height: 235px;
            background-color: #fff;
            margin-right: 20px;
            margin-bottom: 33px;
        }
        
        #main-con .pic-word li:nth-of-type(4),
        #main-con .pic-word li:nth-of-type(8),
        #main-con .pic-word li:nth-of-type(12),
        #main-con .pic-word li:nth-of-type(16) {
            margin-right: 0;
        }
        
        #main-con .pic-word li h3 {
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #f7f7f7;
            box-sizing: border-box;
            padding-left: 14px;
            font-weight: normal;
        }
        
        #main-con .pic-word li h3 a {
            color: #424242;
            font-size: 16px;
        }
        
        #main-con .pic-word li h3 a:hover {
            color: #dd4012;
        }
        
        #main-con .pic-word li h6 {
            font-size: 12px;
            margin-top: 8px;
            box-sizing: border-box;
            padding-left: 13px;
            font-weight: normal;
            color: #939292;
        }
        
        #main-con .numlist {
            width: 241px;
            height: 36px;
            margin: auto;
            display: flex;
            /* background: url(img/zuo.png) no-repeat; */
        }
        
        #main-con .numlist li {
            width: 36px;
            line-height: 36px;
            background-color: #fff;
            text-align: center;
            font-size: 9px;
            color: #b1a9bb;
        }
        
        #main-con .numlist li:nth-of-type(1) {
            background: #fff url(img/zuo.png) no-repeat 12px;
        }
        
        #main-con .numlist li:last-of-type {
            background: #fff url(img/zuo.png) no-repeat -190px;
        }
        
        #main-con .numlist .two {
            background-color: #dd4012;
            color: #fff;
        }
        
        footer {
            height: 82px;
            width: 100%;
            background-color: #323232;
        }
        
        #footer-con {
            width: 1100px;
            margin: auto;
            /* line-height: 82px; */
        }
        
        #about {
            float: right;
        }
        
        #about ul {
            display: flex;
            justify-content: flex-end;
            font-size: 12px;
            color: #999999;
            margin-top: 27px;
            overflow: hidden;
            text-align: right;
        }
        
        #about ul li {
            margin-right: 19px;
        }
        
        #about ul li:last-of-type {
            margin-right: 0;
        }
        
        #about p {
            font-size: 8px;
            color: #666666;
            margin-top: 8px;
            text-align: right;
        }
        
        #template {
            display: none;
        }
    </style>
</head>

<body>
    <header>
        <div id="top">
            <div id="top-con">
                <div id="logo">
                    <div id="logo-con">
                        <img src="img/logo.png" alt="">
                    </div>
                </div>
                <ul>
                    <li>
                        <a href="/index.html" target="_blank">网站首页</a>
                    </li>
                    <li>
                        <a href="#">传悦资源</a>
                    </li>
                    <li class="point">
                        <a href="/case">传悦案例</a>
                    </li>
                    <li>
                        <a href="/project">解决方案</a>
                    </li>
                    <li>
                        <a href="#">需求提交</a>
                    </li>
                </ul>
                <div id="contact">
                    <img src="img/phone.png" alt="">
                    <p>0535-60652189</p>
                    <img src="img/bQQ.png" alt="">
                    <img src="img/bweibo.png" alt="">
                    <img src="img/bweixin.png" alt="">
                    <img src="img/bEmail.png" alt="">
                </div>
            </div>



        </div>
        <div id="banner"></div>
        <div id="bottom">
            <div id="bottom-con">
                <p>网站首页&nbsp;&nbsp;&gt;&nbsp;&nbsp;传悦案例</p>
            </div>
        </div>
    </header>
    <main>
        <div id="main-con">
            <ul class="list">
                <li class="all">全部</li>
                <li>网站建设</li>
                <li>推广运营</li>
                <li>品牌策划</li>
                <li>网络全案</li>
            </ul>

            <ul class="pic-word">
                <% caseList.forEach(function(item){ %>
                    <li>
                        <%- item.img %>
                            <h3>
                                <a href="/casedetail?id=<%= item.id %>">
                                    <%- item.title %>
                                </a>
                            </h3>
                            <%- item.res %>
                    </li>

                    <% }) %>
                        <!-- <li id="template">
                    <img src="" alt="">
                    <h3>
                        <a href=""></a>
                    </h3>
                    <h6></h6>
                </li> -->
                        <!-- <li id="template">
                    <img src="img/1.png" alt="">
                    <h3><a href="">众德集团&nbsp;网站建设</a></h3>
                    <h6>网站建设&nbsp;品牌形象&nbsp;整合营销&nbsp;引导销售</h6>
                </li>
                <li>
                    <img src="img/2.png" alt="">
                    <h3>
                        <a href="">金数据项目推广</a>
                    </h3>
                    <h6>引导性消费&nbsp;品牌定向推广&nbsp;整合营销&nbsp;引导销售</h6>
                </li>
                <li>
                    <img src="img/3.png" alt="">
                    <h3><a href="">开门红商城推广运营</a></h3>
                    <h6>品牌曝光&nbsp;引导销售&nbsp;开门红商城</h6>
                </li>
                <li>
                    <img src="img/4.png" alt="">
                    <h3><a href="">北纬27度葡萄酒商城推广</a></h3>
                    <h6>品牌曝光&nbsp;引导销售&nbsp;电子商务网站</h6>
                </li>
                <li>
                    <img src="img/5.png" alt="">
                    <h3><a href="">众德集团&nbsp;网站建设</a></h3>
                    <h6>网站建设&nbsp;品牌形象&nbsp;整合营销&nbsp;引导销售</h6>
                </li>
                <li>
                    <img src="img/6.png" alt="">
                    <h3><a href="">金数据项目推广</a></h3>
                    <h6>引导性消费&nbsp;品牌定向推广&nbsp;整合营销&nbsp;引导销售</h6>
                </li>
                <li>
                    <img src="img/7.png" alt="">
                    <h3><a href="">开门红商城推广运营</a></h3>
                    <h6>品牌曝光&nbsp;引导销售&nbsp;开门红商城</h6>
                </li>
                <li>
                    <img src="img/8.png" alt="">
                    <h3><a href="">北纬27度葡萄酒商城推广</a></h3>
                    <h6>品牌曝光&nbsp;引导销售&nbsp;电子商务网站</h6>
                </li>
                <li>
                    <img src="img/1.png" alt="">
                    <h3><a href="">众德集团&nbsp;网站建设</a></h3>
                    <h6>网站建设&nbsp;品牌形象&nbsp;整合营销&nbsp;引导销售</h6>
                </li>
                <li>
                    <img src="img/2.png" alt="">
                    <h3><a href="">金数据项目推广</a></h3>
                    <h6>引导性消费&nbsp;品牌定向推广&nbsp;整合营销&nbsp;引导销售</h6>
                </li>
                <li>
                    <img src="img/3.png" alt="">
                    <h3><a href="">开门红商城推广运营</a></h3>
                    <h6>品牌曝光&nbsp;引导销售&nbsp;开门红商城</h6>
                </li>
                <li>
                    <img src="img/4.png" alt="">
                    <h3><a href="">北纬27度葡萄酒商城推广</a></h3>
                    <h6>品牌曝光&nbsp;引导销售&nbsp;电子商务网站</h6>
                </li>
                <li>
                    <img src="img/5.png" alt="">
                    <h3><a href="">众德集团&nbsp;网站建设</a></h3>
                    <h6>网站建设&nbsp;品牌形象&nbsp;整合营销&nbsp;引导销售</h6>
                </li>
                <li>
                    <img src="img/6.png" alt="">
                    <h3><a href="">金数据项目推广</a></h3>
                    <h6>引导性消费&nbsp;品牌定向推广&nbsp;整合营销&nbsp;引导销售</h6>
                </li>
                <li>
                    <img src="img/7.png" alt="">
                    <h3><a href="">开门红商城推广运营</a></h3>
                    <h6>品牌曝光&nbsp;引导销售&nbsp;开门红商城</h6>
                </li>
                <li>
                    <img src="img/8.png" alt="">
                    <h3><a href="">北纬27度葡萄酒商城推广</a></h3>
                    <h6>品牌曝光&nbsp;引导销售&nbsp;电子商务网站</h6>
                </li> -->
            </ul>

            <ul class="numlist">
                <li></li>
                <li>1</li>
                <li class="two">2</li>
                <li>3</li>
                <li>4</li>
                <li></li>
            </ul>
        </div>
    </main>

    <footer>
        <div id="footer-con">
            <img src="img/bottom_logo.png" alt="">
            <div id="about">
                <ul>
                    <li>关于传悦</li>
                    <li>新闻动态</li>
                    <li>传悦观点</li>
                    <li>联系传悦</li>
                    <li>加入传悦</li>
                    <li>付款账户</li>
                </ul>
                <p>Copyright&nbsp;&copy;2013&nbsp;&nbsp;创梦网络科技有限责任公司&nbsp;&nbsp;&nbsp;||&nbsp;&nbsp;&nbsp;传悦&nbsp;&nbsp;Chnyoo.cn&nbsp;All&nbsp;Rights&nbsp;Reserved&nbsp;&nbsp;京ICP备12005221号</p>
            </div>
        </div>
    </footer>
</body>

</html>